<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>
	<body>
		<nav class="mui-bar mui-bar-tab">
			<a href="home/home.html" class="mui-tab-item">
				<span class="mui-icon mui-icon-phone"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a href="write_together/books_list.html" class="mui-tab-item">
				<span class="mui-icon mui-icon-phone"></span>
				<span class="mui-tab-label">一起写</span>
			</a>
			<a href="make/make.html" class="mui-tab-item">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">制作</span>
			</a>
			<a href="personal/personal.html" class="mui-tab-item">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function(){
				mui.init({
            gestureConfig:{
                doubletap:true
            },
            subpages:[{
                url:'home/home.html',
                id:'MainViwe',
                styles:{
                    top: '0',
                    bottom: '51px'
                }
            }]
        	});
			}
			mui.plusReady(function() {
				//要切换的子页面
				var subpages = ['home/home.html','write_together/books_list.html', 'make/make.html', 'personal/personal.html'];
				var activeTab = subpages[0];
				 $('.mui-bar-tab>a:first-child').addClass('mui-active');
				//子页面样式，这里只有主页的底部是公用的，所以距离底部51个px,距离顶部0个px
				var subpage_style = {
					top: '0px',
					bottom: '51px'
				};
				var aniShow = {};
				var self = plus.webview.currentWebview();
				for(var i = 1; i < 4; i++) {
					var temp = {};
					var sub = plus.webview.create(subpages[i], subpages[i], subpage_style, {});
					if(i > 0) {
						sub.hide();
					} else {
						temp[subpages[i]] = "true";
						mui.extend(aniShow, temp);
					}
					self.append(sub);
				}
				//当前激活选项
				

				//选项卡点击事件
				mui('.mui-bar-tab').on('tap', 'a', function(e) {
					var targetTab = this.getAttribute('href');
					if(targetTab == activeTab) {
						return;
					}

					//显示目标选项卡
					//若为iOS平台或非首次显示，则直接显示
					if(mui.os.ios || aniShow[targetTab]) {
						plus.webview.show(targetTab);
					} else {
						//否则，使用fade-in动画，且保存变量
						var temp = {};
						temp[targetTab] = "true";
						mui.extend(aniShow, temp);
						plus.webview.show(targetTab, "fade-in", 300);
					}
					//隐藏当前;
					plus.webview.hide(activeTab);
					//更改当前活跃的选项卡
					activeTab = targetTab;
				});
				//自定义事件，模拟点击“首页选项卡” 
				//即一加载的时候就显示默认的子页面，不然在点击选项卡之前，除了底部选项卡是一片空白
				document.addEventListener('gohome', function() {
					var defaultTab = document.getElementById("defaultTab");
					//模拟首页点击
					mui.trigger(defaultTab, 'tap');
					//切换选项卡高亮
					var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
					if(defaultTab !== current) {
						current.classList.remove('mui-active');
						defaultTab.classList.add('mui-active');
					}
				});
			});
		</script>
	</body>

</html>